<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<view>我的</view>
		</view>
		<!-- 内容 -->
		<view class="content_box">
			<view class="head_box">
				<view class="up">
					<image :src="avatarUrl"></image>
					<view class="login">
						<text class="lo" @click="login">{{nickName}}</text>
						<text v-show="hideText">\n登录后可收藏喜欢的菜谱</text>
					</view>
				</view>
				<view class="down">
					<image src="/static/image/mengbanzu87.png" mode=""></image>
					<view class="upgrade" @click="toVipPage">升级为VIP</view>
					<view class="icon">{{">"}}</view>
				</view>
			</view>
			<view class="space"></view>
			<view class="mine">
				<view class="collection box" @click="getMycollectData(id)">
					<image src="/static/image/mengbanzu279.png"></image>
					<text :class="{active:checkedItem == '我的收藏'}">我的收藏</text>
				</view>
				<view class="viewRecord box" @click="getMyRecordData">
					<image src="/static/image/mengbanzu 281@3x.png" mode=""></image>
					<text :class="{active:checkedItem == '浏览记录'}">浏览记录</text>
				</view>
				<view class="like box">
					<image src="/static/image/mengbanzu 272@3x.png" mode=""></image>
					<text :class="{active:checkedItem == '点赞'}">点赞</text>
				</view>
			</view>
			<view class="space"></view>
			<view class="foods">
				<scroll-view class="scroll-view_H" scroll-x scroll-left="0">
					<view class="scroll-view-item_H" :class="{active:item == currentFood}"
						v-for="(item,index) in foodsTab" :key="index" @click="changeFood(item)">
						{{item}}
					</view>
				</scroll-view>
				<template v-for="(item,index) in allfoods">
					<view class="foods_item" v-if="index < renderMaxListIndex" :key="index">
						<text class="name">{{item.name}}</text>
						<text class="kg">{{item.number}}</text>
					</view>
				</template>
				<view class="openList" @click="openList" v-if="renderMaxListIndex != allfoods.length">
					展开全部
					<image src="/static/image/mengbanzu 282.png" mode=""></image>
				</view>
			</view>
			<view class="space"></view>
			<!-- 我的菜谱 -->
			<view class="myFood">
				<view class="title">我的菜谱</view>
				<scroll-view class="scroll-view_H" scroll-x scroll-left="0">
					<!-- 循环下面这个盒子 -->
					<view class="scroll-view-item_H" v-for="item in myMenu" :key="item._id">
						<image :src="item.coverpic" mode=""></image>
						<view class="food_name">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="space"></view>
			<view class="bottom">
				<view class="score box">
					<image src="/static/image/mengbanzu 272@3x.png" mode=""></image>
					<view>去App Store给菜谱大全评分</view>
				</view>
				<view class="question box">
					<image src="/static/image/mengbanzu273.png" mode=""></image>
					<view>反馈问题</view>
				</view>
			</view>
			<view class="space"></view>
		</view>
	</view>
</template>

<script>
	import {
		getCollectApi,
		getMyRecordApi
	} from "../../apis/mine.js"
	import {
		login,
		getUserInfo,
		updateUserInfo
	} from "../../apis/user.js"
	export default {
		mounted() {
			const userInfo = uni.getStorageSync("userInfo")
			if (userInfo._id) {
				this.id = userInfo._id
				this.avatarUrl = userInfo.avatarUrl
				this.nickName = userInfo.nickName
				this.hideText = false
				//不为空就发送接口
				//看收藏后能不能更新，不能使用onshow（）生命周期钩子函数
				if (userInfo.mycollect.length) {
					//获取我的收藏数据
					this.getMycollectData(userInfo._id)
				}
			}
		},
		data() {
			return {
				foodsTab: [], //tab列表
				currentFood: "所有食材",
				//配料列表
				allfoods: [],
				renderMaxListIndex: 5,
				avatarUrl: "/static/image/zu428.png",
				nickName: "立即登录",
				data: [], //全部数据
				myMenu: [],
				id: "",
				hideText: true,
				checkedItem: "我的收藏"
			};
		},
		methods: {
			//切换菜谱tab
			changeFood(val) {
				this.currentFood = val
				if (val != "所有食材") {
					const {
						ingredient
					} = this.data.find(item => item.name == val)
					this.allfoods = ingredient
				} else {
					this.allfoods = []
					this.data.forEach(item => {
						this.allfoods = [...this.allfoods, ...item.ingredient]
					})
					//去重
					let set = new Set(this.allfoods)
					this.allfoods = [...set]
				}
				this.renderMaxListIndex = 5
			},
			//产开所有食材列表
			openList() {
				this.renderMaxListIndex = this.allfoods.length
			},
			//授权登录
			login() {
				//获取用户信息
				uni.getUserProfile({
					desc: "获取用户基本信息",
					success: ({
						userInfo
					}) => {
						//获取code凭证
						uni.login({
							success: ({
								code
							}) => {
								//调后端登录接口
								login({
									code,
									appId: "wxd0dbbfd46439c6e8",
									appSecret: "931b2e6689bb5f1c00d46ffffdda25ea"
								}).then(res => {
									//保存token和userInfo
									uni.setStorageSync("token", res.token)
									uni.setStorageSync("userInfo", res.userInfo)
									//调用更新用户信息函数
									this.updateUserInfo({
										token: res.token,
										avatarUrl: userInfo.avatarUrl,
										nickName: userInfo.nickName,
										gender: userInfo.gender,
										province: userInfo.province
									})
								})
							}
						})
					}
				})
			},
			//更新用户信息
			updateUserInfo(data) {
				this.avatarUrl = data.avatarUrl
				this.nickName = data.nickName
				//更新用户信息
				updateUserInfo(data).then(res => {
					//调用获取用户信息函数
					this.getUserInfo(data.token)
				})
			},
			//获取用户信息
			getUserInfo(token) {
				getUserInfo({
					token
				}).then(res => {
					const userInfo = res[0]
					uni.setStorageSync("userInfo", userInfo)
				})
			},

			//获取我的收藏数据，渲染tab
			getMycollectData(_id) {
				this.checkedItem = "我的收藏"
				getCollectApi({
					_id
				}).then(res => {
					this.data = res.mycollect
					this.myMenu = res.mycollect
					const tempArr = this.data.map(item => item.name)
					this.foodsTab = ["所有食材", ...tempArr]
					//更新所有食材信息
					this.changeFood("所有食材")
				})
			},
			//获取我的浏览记录
			//点击切换调用
			getMyRecordData() {
				this.checkedItem = "浏览记录"
				getMyRecordApi({
					_id: this.id
				}).then(res => {
					this.data = res.record
					const tempArr = this.data.map(item => item.name)
					this.foodsTab = ["所有食材", ...tempArr]
					//更新所有食材信息
					this.changeFood("所有食材")
				})
			},
			//跳转到开vip页面
			toVipPage() {
				uni.navigateTo({
					url: "/pages/sub/myVip/myVip"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 160rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: white;

		view {
			font-size: 36rpx;
			color: #000000;
			font-weight: 550;
			padding-top: 90rpx;
			text-align: center;
		}
	}

	.content_box {
		width: 100%;
		padding-top: 170rpx;

		.head_box {
			width: 100%;
			height: 270rpx;
			box-sizing: border-box;
			padding: 0rpx 32rpx;

			.up {
				display: flex;
				justify-content: flex-start;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
					border-radius: 60rpx;
				}

				.login {
					margin-top: 24rpx;

					.lo {
						font-size: 32rpx;
						color: #515151;

					}

					text {
						font-size: 22rpx;
						color: #d1d1d1;
					}
				}
			}

			.down {
				width: 100%;
				height: 120rpx;
				margin-top: 30rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
				}

				.upgrade {
					width: 100%;
					height: 32rpx;
					font-size: 22rpx;
					font-weight: 550;
					color: #b4853f;
					position: absolute;
					left: 100rpx;
					top: 20rpx;
				}

				.icon {
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					right: 80rpx;
					top: 12rpx;
					color: #b89766;
				}
			}
		}

		/*  */
		.space {
			height: 20rpx;
			background-color: #f5f5f5;
		}

		.mine {
			height: 120rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 8rpx;
			}

			.box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				color: #444444;

				.active {
					color: #b4853f;
				}
			}
		}

		/* foodsTab */
		.foods {
			width: 100%;
			box-sizing: border-box;
			padding: 0 32rpx 26rpx;

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 66rpx;
				border-bottom: 1rpx solid #c5c5c5;

				.scroll-view-item_H {
					display: inline-block;
					margin-right: 36rpx;
					height: 100%;
					line-height: 66rpx;
					font-size: 22rpx;
					color: #5a5a5a;
				}

				.active {
					font-size: 28rpx;
					color: #ee7b2d;
					font-weight: 550;
				}
			}

			.foods_item {
				height: 66rpx;
				border-bottom: 1rpx solid #c5c5c5;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #686868;
				font-weight: 550;

				.kg {
					margin-right: 152rpx;
				}
			}

			.openList {
				height: 40rpx;
				color: #5a5a5a;
				font-size: 22rpx;
				vertical-align: middle;
				display: flex;
				justify-content: center;
				align-items: flex-end;

				image {
					width: 20rpx;
					height: 20rpx;
					vertical-align: middle;
				}
			}
		}

		/* 我的菜谱 */
		.myFood {
			width: 100%;
			height: 344rpx;
			border-radius: 8rpx;
			box-sizing: border-box;
			padding: 0 32rpx;

			.title {
				font-size: 28rpx;
				color: #5a5a5a;
				margin-top: 10rpx;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 260rpx;
				margin-top: 32rpx;

				.scroll-view-item_H {
					display: inline-block;
					margin-right: 32rpx;
					width: 172rpx;
					height: 100%;
					font-size: 22rpx;
					color: #5a5a5a;

					image {
						width: 100%;
						height: 208rpx;
						border-radius: 16rpx;
					}

					.food_name {
						text-align: center;
						margin-top: 12rpx;
					}
				}
			}
		}

		/*  */
		.bottom {
			width: 100%;
			height: 190rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			display: grid;
			grid-template-rows: repeat(2, 1fr);

			.box {
				display: flex;
				justify-content: flex-start;
				align-items: center;

				view {
					height: 100%;
					margin-left: 24rpx;
					line-height: 95rpx;
					font-size: 28rpx;
					color: #5a5a5a;

				}

				image {
					width: 44rpx;
					height: 44rpx;
				}

				&:first-child>view {
					flex-grow: 1;
					border-bottom: 1rpx solid #dadada;
				}
			}

		}
	}
</style>
